<template>
<<<<<<< HEAD
 <Teleport to=".header">
      <van-nav-bar :title="title" :left-arrow='back'>
        <template #left>
            <van-icon class='back-btn' name='arrow-left'/>
        </template>
        <template #title>
           <slot name='title'>{{title}}</slot>
        </template>
        <template #right>
           <slot name='right'>{{right}}</slot>
        </template>
      </van-nav-bar>
 </Teleport>
=======
  <!-- 把该标签里面所有内容, 在页面上给我渲染到 .sdy-header 这个标签里面 -->
  <Teleport to=".sdy-header">
    <van-nav-bar :title="title" :left-arrow="back">
      <template #left>
        <slot name="left">
          <van-icon class="back-btn" name="arrow-left" />
        </slot>
      </template>
      <template #title>
        <slot name="title">{{ title }}</slot>
      </template>
      <template #right>
        <slot name="right"></slot>
      </template>
    </van-nav-bar>
  </Teleport>
>>>>>>> 24d0d7191411ba3bacecf3c116acfb924e67c6fb
</template>
<script setup lang='ts'>
import {defineProps} from 'vue'
interface MyTopBar {
  title: string;
  back?: boolean; 
}
defineProps<MyTopBar>()
</script>
<<<<<<< HEAD
<style scoped>
 .back-btn{
  font-size: 24px;
  color: black; 
 }
</style>
=======

<style scoped lang="scss">
@import '@/styles/variable.scss';
// 覆盖样式
:deep(.van-nav-bar__content) {
  background-color: $globalColor;
}

.back-btn {
  font-size: 24px;
  color: black!important;
}
</style>
>>>>>>> 24d0d7191411ba3bacecf3c116acfb924e67c6fb
